<template>
  <BasicModal
    @register="register"
    title="组织设置"
    width="800px"
    :destroyOnClose="true"
    okText="保存设置"
    @ok="handleOk"
  >
    <Form
      :model="formState"
      :label-col="{ style: { width: '150px' } }"
      :wrapper-col="{ style: { width: 'calc(100% - 150px)' } }"
    >
      <FormItem label="推入数量限制：">
        <RadioGroup v-model:value="pushLimit">
          <Radio :style="radioStyle" :value="WhetherOrNot.NO">不限制推入数量</Radio>
          <Radio :style="radioStyle" :value="WhetherOrNot.YES"
            >限制最多推入
            <InputNumber
              v-if="pushLimit === WhetherOrNot.YES"
              v-model:value="formState.productLimit"
              :precision="0"
              :min="1"
              class="w-28 mx-2"
            >
              <template #addonAfter>个</template>
            </InputNumber>
          </Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="允许推选品广场：">
        <Switch
          v-model:checked="formState.autoSquare"
          :checkedValue="WhetherOrNot.YES"
          :unCheckedValue="WhetherOrNot.NO"
        />
        <div class="text-[#86909C] pt-2"
          >开启后，允许把产品推入当前组织选品广场，组织的会员可分销产品</div
        >
      </FormItem>
      <FormItem label="允许推首页：">
        <Switch
          v-model:checked="formState.indexFlag"
          :checkedValue="WhetherOrNot.YES"
          :unCheckedValue="WhetherOrNot.NO"
        />
        <div class="text-[#86909C] pt-2">开启后，允许将精选版块配置在当前首页</div>
      </FormItem>
      <FormItem label="平台服务费：">
        <div class="flex items-center">
          <span>每笔订单佣金中抽取</span>
          <InputNumber
            v-model:value="formState.platformCommission"
            :min="0"
            :max="100 - (formState.releaseOrgCommission + formState.distributionOrgCommission)"
            :precision="0"
            class="w-28 mx-2"
          >
            <template #addonAfter>%</template>
          </InputNumber>
          <span>作为平台服务费</span>
        </div>
      </FormItem>
      <FormItem label="发布组织服务费：">
        <div class="flex items-center">
          <span>每笔订单佣金中抽取</span>
          <InputNumber
            v-model:value="formState.releaseOrgCommission"
            :min="0"
            :max="100 - (formState.platformCommission + formState.distributionOrgCommission)"
            :precision="0"
            class="w-28 mx-2"
          >
            <template #addonAfter>%</template>
          </InputNumber>
          <span>作为发布组织服务费</span>
        </div>
      </FormItem>
      <FormItem label="分销组织服务费：">
        <div class="flex items-center">
          <span>每笔订单佣金中抽取</span>
          <InputNumber
            v-model:value="formState.distributionOrgCommission"
            :min="0"
            :max="100 - (formState.platformCommission + formState.releaseOrgCommission)"
            :precision="0"
            class="w-28 mx-2"
          >
            <template #addonAfter>%</template>
          </InputNumber>
          <span>作为分销组织服务费</span>
        </div>
      </FormItem>
      <FormItem label="分销者佣金：">
        <div>
          <span>剩余</span>
          <span class="text-yellow-500 mx-2 font-bold"
            >{{ 100 - (formState.platformCommission + formState.releaseOrgCommission + formState.distributionOrgCommission) }}%</span
          >
          <span>作为分销者佣金</span>
        </div>
      </FormItem>
    </Form>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { reactive, ref, unref, watch } from 'vue';
  import { Form, FormItem, RadioGroup, Radio, Switch, InputNumber } from 'ant-design-vue';
  import { merchantUpData } from '@/api/hby/resourceLeague/index';
  import { MerchantConfig } from '@/api/hby/resourceLeague/type';
  import { WhetherOrNot } from '@/enums/customFormEnum';
  import { useMessage } from '@/hooks/web/useMessage';
  import { cloneDeep } from 'lodash-es';

  const radioStyle = reactive({
    display: 'flex',
    height: '30px',
    lineHeight: '30px',
  });

  const emit = defineEmits(['register']);

  const cacheProductLimit = ref<number>(0);
  const pushLimit = ref(WhetherOrNot.NO);
  const formState = ref({} as MerchantConfig);
  const [register, { closeModal }] = useModalInner((data: MerchantConfig) => {
    formState.value = cloneDeep(data);
    cacheProductLimit.value = unref(formState).productLimit;
    pushLimit.value = unref(formState).productLimit === -1 ? WhetherOrNot.NO : WhetherOrNot.YES;  // 是否限制推入, 不限制推入数量 -1
  });

  watch(
    () => unref(pushLimit),
    (newVal) => {
      if(newVal === WhetherOrNot.YES){
        formState.value.productLimit = unref(cacheProductLimit) <= 0 ? 1 : unref(cacheProductLimit);
      }else{
        cacheProductLimit.value = unref(formState).productLimit;
        formState.value.productLimit = -1;
      }
    }
  );

  const { createMessage } = useMessage();
  function handleOk() {
    formState.value.distributionCommission = (100 - (unref(formState).platformCommission + unref(formState).releaseOrgCommission + unref(formState).distributionOrgCommission))
    merchantUpData(unref(formState)).then(() => {
      createMessage.success('设置成功');
      closeModal();
    })
  }
</script>
<style lang="less"></style>
